<template>
  <div>
    <div ref="chart" :style="style"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "ChartsCharts",
  props: {
    option: {
      type: Object,
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "22vh",
    },
  },
  data() {
    return {
      Myecharts: null,
    };
  },
  computed: {
    style() {
      return {
        width: this.width,
        height: this.height,
      };
    },
  },
  mounted() {
    var Myecharts = echarts.init(this.$refs.chart);
    this.Myecharts = Myecharts;
    Myecharts.setOption(this.option)
    window.addEventListener("resize", function () {
      Myecharts.resize();
    });
  },
  methods: {},
  watch: {
    option: {
      deep: true,
      handler(newOption) {
        this.Myecharts.setOption(newOption);
      },
    },
  },
};
</script>

<style lang="less" scoped>
</style>